<template>

<div class="app-container">
  
  <!--条件查询-->
  <div>
     <el-form ref="form" :inline="true" :model="businessWhere" label-width="80px" class="demo-form-inline">

            <el-form-item label="商家名称" size="mini">
              <el-input v-model="businessWhere.businessName"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" size="mini">
           <el-input v-model="businessWhere.classIficationName"></el-input>

            </el-form-item>


            <el-form-item>

            <el-button type="primary" icon="el-icon-search" size="mini"  @click="selectWhere">查询</el-button>


              <el-button type="warning" size="mini">取消</el-button>
            </el-form-item>
          </el-form>
  <!-- 添加按钮 -->
           <div>
              <el-button type="success" @click="add" size="small"> 添加</el-button>
           </div>

  <!-- 列表渲染 -->
   <div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type='index' prop="id" label="序号"  width="80">
            </el-table-column>
               <el-table-column  prop="businessName" label="商家名称">
               </el-table-column>
               <el-table-column prop="img" label="图片">
                 <template slot-scope="scope">
                     <img :src="scope.row.img" width="150" height="150" alt=""/>
                   </template>
               </el-table-column>
               <el-table-column  prop="classIficationName" label="分类">
               </el-table-column>
               <el-table-column prop="createTime" label="创建时间">
               </el-table-column>
                <el-table-column  label="操作">
                  <template slot-scope='scope'>
                     <el-button type="primary" icon="el-icon-edit" @click="update(scope.row)" size="small">修改</el-button>
                     <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
                  </template>

                </el-table-column>
             </el-table>
       </div>
       <!-- 分页插件 -->
                <el-pagination
                           :current-page="pageIndex"
                           :page-size="pageSize"
                           :total="total"
                           style="padding: 30px 0; text-align: center;"
                           layout="total, prev, pager, next, jumper"
                           @current-change="listPage"
                         />
                         <!-- 添加窗体 -->
                         <!-- 修改窗体 -->
                                <el-dialog
                                       title="添加/修改用户窗体" :visible.sync="businessVisible" width="65%">
                                         <el-form ref="form" :model="addBusiness" label-width="80px">
                                           <el-form-item label="序号">
                                             <el-input v-model="addBusiness.id"></el-input>
                                           </el-form-item>
                                           <el-form-item label="商家名称">
                                             <el-input v-model="addBusiness.businessName"></el-input>
                                           </el-form-item>
                                           <el-form-item label="图片">
                                             <!--<el-input type="img" v-model="addBusiness.img"></el-input> -->
                                             <el-upload
                                               class="avatar-uploader"

                                               action="https://jsonplaceholder.typicode.com/posts/"
                                               :show-file-list="false"
                                               :on-success="handleAvatarSuccess"
                                               :before-upload="beforeAvatarUpload">
                                               <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                             </el-upload>
                                             </el-form-item>
                                           <el-form-item label="分类">
                                             <el-input type="desc" v-model="addBusiness.classIficationName"></el-input>
                                           </el-form-item>
                                             <el-form-item label="创建时间">
                                               <el-date-picker
                                                     v-model="addBusiness.createTime"
                                                     type="datetime"
                                                      value-format="yyyy-MM-dd HH:mm:ss"
                                                     placeholder="选择日期时间">
                                                   </el-date-picker>
                                              </el-form-item>

                                           </el-form>
                                           <span slot="footer" class="dialog-footer">
                                               <el-button @click="businessVisible = false">取 消</el-button>
                                               <el-button type="primary" @click="sendaddBusiness()">确 定</el-button>
                                             </span>
                                           </el-dialog>
      </div>

</div>
</template>

<script>

  export default{
    name:'index',
    data(){
      return{
        imageUrl:'',
 businessVisible:false,
        pageIndex:1,
        pageSize:10,
        total:7,

        addBusiness:{
          id:0,
          businessName:'',
          img:'',
          classIficationName:'',
          createTime:''

        },
        tableData:[
          {
          id:1,
          businessName:'好巴适川菜馆',
          img:'https://img0.baidu.com/it/u=3755744773,2110491794&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666 ',
          classIficationName:'川菜',
          createTime:'2023-10-01 12:20:32'
          },{
            id:2,
            businessName:'查厘士港式餐厅',
            img:'https://img2.baidu.com/it/u=2756852856,1991589219&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=350',
            classIficationName:'港菜',
            createTime:'2023-10-01 13:45:30'
          },
          { id:3,
            businessName:'橘子餐厅',
            img:'https://img0.baidu.com/it/u=521262327,3611223037&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400',
            classIficationName:'融合菜',
            createTime:'2023-10-01 14:32:23'

            },


        ],

        businessWhere:{
          businessName:'',
          classIficationName:'',
        }
      }
    },

    methods:{

       listPage(){},
//修改
update(data){

   this.addBusiness.id=data.id
        this.addBusiness.businessName = data.businessName
         this.addBusiness.img = data.img
         this.addBusiness.classIficationName = data.classIficationName
        this.addBusiness.createTime = data.createTime


        this.businessVisible=true
  },

//删除
del(id){
 this.tableData=this.tableData.filter((item)=>item.id!==id)
  },



      sendaddBusiness(){
           this.tableData.push(this.addBusiness)

           this.businessVisible = false
         },
      //条件查询
      selectWhere(data)
      {
console.log("input"+this.businessWhere)
        this.tableData=this.tableData.filter(item=>item.businessName.includes(this.businessWhere.businessName))
        this.tableData=this.tableData.filter(item=>item.classIficationName.includes(this.businessWhere.classIficationName))
      },
      //添加
      add(){
this.addBusiness={}
    this.businessVisible=true
      },

   handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
            },

            handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                  },
                  beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                      this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                      this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                  }
    }
  }
</script>

<style>

  avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
